<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background: url(./img/1.jpg) no-repeat 100%;
        position: relative;
    }

    .box {
        width: 300px;
        height: 350px;
        /* background-color: bisque;
        opacity: 0.3; */
        position: absolute;
        top: 210px;
        left: 40%;
        margin: auto;
    }

    #user,
    #password {
        width: 200px;
        height: 30px;
    }

    .box h1 {
        text-align: center;
        color: cyan;
    }

    .box span {
        color: yellow;
        font-weight: bolder;
        font-size: 22px;
    }

    #login {
        width: 200px;
        height: 50px;
        background-color: blanchedalmond;
        font-size: 24px;
        margin: auto;
    }
</style>

<body>
    <!-- 页面显示一个图片 和 一段文字
        场景一：未登录 或 登录时间过期 就显示登录界面 去登录
        场景二： 已登录 就直接显示 图片和文字 并且延长免登录时间至最新的7天 -->
    <div class="box">
        <h1>三国演义</h1>
        <span>用户：</span><input type="text" id="user"><br>
        <span>密码：</span><input type="password" id="password"><br>
        <button id="login">登录</button>
    </div>
</body>
<script>
    document.getElementById('login').onclick = function () {
        document.cookie = `name=${user.value};max-age=60`
        document.cookie = `psw=${password.value};max-age=60`
        console.log(document.cookie.split());
        //本地设置cookie值
        /* 1判断2个input输入框的值是否为空 不为空跳转页面
           2 跳转页面后input值 = ''
           3 如果cookie !=空 

           
           
           
           */
        //判断input框里是否为空
        if (user.value != '' && password.value != '') {
            //跳转页面
            document.location = '练习cookie.html'
        } else {
            alert('请输入账号或密码')
        }
        //登录之后清空input框里面的值
        user.value = ''
        password.value = ''



    }

//   


</script>

</html>